<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员用户管理</title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/管理员用户管理.css">
</head>

<body class="bg-gray-100">
<div class="flex h-screen">
    <div class="sidebar bg-primary-dark text-primary-light w-64 p-4">
        <div class="logo mb-8">
            <h2 class="text-2xl font-bold">管理系统</h2>
        </div>
        <div class="nav-menu space-y-4">
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer active">
                <i class="fas fa-shopping-cart mr-3"></i>
                <span><a href="管理员订单管理.html">订单管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-truck mr-3"></i>
                <span><a href="管理员运输管理.html">运输管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-boxes mr-3"></i>
                <span><a href="管理员库存管理.html">库存管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-warehouse mr-3"></i>
                <span><a href="管理员仓库管理.html">仓库管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-users mr-3"></i>
                <span><a href="管理员用户管理.html">用户管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-cog mr-3"></i>
                <span><a href="管理员系统设置.html">系统设置</a></span>
            </div>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="flex-1 overflow-y-auto">
        <!-- 头部 -->
        <div class="header bg-white shadow-md p-4 flex justify-between items-center">
            <div class="search-bar relative">
            <input type="text" id="searchInput" placeholder="搜索..."
                   class="border border-gray-300 rounded p-2 pr-10 w-64 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
            <i class="fas fa-search absolute right-3 top-3 text-gray-500"></i>
        </div>
            <div class="user-info flex items-center">
                <img src="https://picsum.photos/30/30" alt="用户头像" class="rounded-full mr-2">
                <span class="font-bold">管理员</span>
            </div>
        </div>
        <!-- 管理员工具栏 -->
        <div class="admin-toolbar bg-white p-4 shadow-md flex justify-between items-center">
            <div class="quick-stats flex space-x-8">
                <div class="stat-item stat-card">
                    <i class="fas fa-users mr-3"></i>
                    <div class="stat-value">500</div>
                    <div class="stat-label text-gray-500">总用户数</div>
                    <div class="stat-change"><i class="fas fa-arrow-up"></i> 3%</div>
                </div>
                <div class="stat-item stat-card">
                    <i class="fas fa-user-plus mr-3"></i>
                    <div class="stat-value">20</div>
                    <div class="stat-label text-gray-500">今日新增用户</div>
                    <div class="stat-change"><i class="fas fa-arrow-up"></i> 5%</div>
                </div>
                <div class="stat-item stat-card">
                    <i class="fas fa-user-slash mr-3"></i>
                    <div class="stat-value">10</div>
                    <div class="stat-label text-gray-500">今日停用用户</div>
                    <div class="stat-change"><i class="fas fa-arrow-down"></i> 2%</div>
                </div>
                <div class="stat-item stat-card">
                    <i class="fas fa-user-check mr-3"></i>
                    <div class="stat-value">450</div>
                    <div class="stat-label text-gray-500">活跃用户</div>
                    <div class="stat-change"><i class="fas fa-arrow-up"></i> 4%</div>
                </div>
            </div>
            <div class="action-buttons flex space-x-4">
                <button class="btn btn-primary-custom" onclick="exportUserData()">导出用户数据</button>
                <button class="btn btn-success bg-green-500 text-white p-2 rounded hover:bg-green-600" onclick="generateUserReport()">生成用户报告</button>
            </div>
        </div>
        <!-- 仪表盘 -->
        <div class="dashboard p-4">
            <div class="dashboard-title flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold">用户管理仪表盘</h3>
                <div class="dropdown relative">
                    <button class="btn btn-warning bg-yellow-500 text-white p-2 rounded hover:bg-yellow-600">高级操作</button>
                    <div class="dropdown-content absolute hidden bg-white shadow-md rounded mt-1 z-10">
                        <a href="#" class="block p-2 hover:bg-gray-200" onclick="openImportUserModal()">批量导入用户</a>
                        <a href="#" class="block p-2 hover:bg-gray-200" onclick="cleanUserData()">用户数据清理</a>
                    </div>
                </div>
            </div>
            <div class="filter-bar flex space-x-4 mb-4">
                <div class="filter-group">
                    <label for="user-role" class="block mb-1 font-bold">用户角色</label>
                    <select id="user-role" class="w-full p-2 border rounded">
                        <option value="all">全部</option>
                        <option value="customer">客户</option>
                        <option value="seller">卖家</option>
                        <option value="normal_admin">普通管理员</option>
                        <option value="mall_admin">商城管理员</option>
                    </select>
                </div>

                <div class="filter-group">
                    <label for="user-status" class="block mb-1 font-bold">用户状态</label>
                    <select id="user-status" class="w-full p-2 border rounded">
                        <option value="all">全部</option>
                        <option value="active">活跃</option>
                        <option value="inactive">停用</option>
                    </select>
                </div>
                <div class="flex items-end">
                    <button class="btn btn-primary-custom h-10" onclick="filterUsers()">筛选</button>
                    <button class="btn btn-secondary-custom h-10 ml-2" onclick="resetFilters()">重置</button>
                </div>
            </div>
            <table class="user-list bg-white shadow-md rounded mb-4">
                <thead>
                <tr>
                    <th class="p-2 border-b">#</th>
                    <th class="p-2 border-b">用户 ID</th>
                    <th class="p-2 border-b">用户 密码</th>
                    <th class="p-2 border-b">用户名</th>
                    <th class="p-2 border-b">用户性别</th>
                    <th class="p-2 border-b">用户角色</th>
                    <th class="p-2 border-b">联系电话</th>
                    <th class="p-2 border-b">用户邮箱</th>
                    <th class="p-2 border-b">收货地址</th>
                    <th class="p-2 border-b">用户状态</th>
                    <th class="p-2 border-b">注册时间</th>
                    <th class="p-2 border-b">操作</th>
                </tr>
                </thead>
                <tbody id="userTableBody">
                <tr>
                    <td class="p-2 border-b">1</td>
                    <td class="p-2 border-b">U001</td>
                    <td class="p-2 border-b">12345678</td>
                    <td class="p-2 border-b">张三</td>
                    <td class="p-2 border-b">男</td>
                    <td class="p-2 border-b">客户</td>
                    <td class="p-2 border-b">12345678909</td>
                    <td class="p-2 border-b">wenchaung@123.com</td>
                    <td class="p-2 border-b">四川合江</td>
                    <td class="p-2 border-b"><span class="user-status user-status-active">活跃</span></td>
                    <td class="p-2 border-b">2025-01-01</td>
                    <td class="p-2 border-b">
                        <button class="btn btn-sm btn-primary-custom" onclick="openUserModal('U001', '张三', 'customer', 'active', '2025-01-01')">查看详情</button>
                        <button class="btn btn-sm btn-warning bg-yellow-500 text-white p-1 rounded hover:bg-yellow-600"
                                onclick="openEditUserModal('U001')">编辑</button>
                        <button class="btn btn-sm btn-danger bg-red-500 text-white p-1 rounded hover:bg-red-600" onclick="openDeactivateUserModal('U001', '张三')">停用</button>
                    </td>
                </tr>
                <tr>
                    <td class="p-2 border-b">2</td>
                    <td class="p-2 border-b">U002</td>
                    <td class="p-2 border-b">890952@</td>
                    <td class="p-2 border-b">李四</td>
                    <td class="p-2 border-b">男</td>
                    <td class="p-2 border-b">卖家</td>
                    <td class="p-2 border-b">12345678912</td>
                    <td class="p-2 border-b">wenchaung@456.com</td>
                    <td class="p-2 border-b">四川南充</td>
                    <td class="p-2 border-b"><span class="user-status user-status-inactive">停用</span></td>
                    <td class="p-2 border-b">2025-02-15</td>
                    <td class="p-2 border-b">
                        <button class="btn btn-sm btn-primary-custom" onclick="openUserModal('U002', '李四', 'seller', 'inactive', '2025-02-15')">查看详情</button>
                        <button class="btn btn-sm btn-warning bg-yellow-500 text-white p-1 rounded hover:bg-yellow-600"
                                onclick="openEditUserModal('U002')">编辑</button>
                        <button class="btn btn-sm btn-success bg-green-500 text-white p-1 rounded hover:bg-green-600" onclick="openActivateUserModal('U002', '李四')">启用</button>
                    </td>
                </tr>
                <tr>
                    <td class="p-2 border-b">3</td>
                    <td class="p-2 border-b">U003</td>
                    <td class="p-2 border-b">090909</td>
                    <td class="p-2 border-b">王五</td>
                    <td class="p-2 border-b">男</td>
                    <td class="p-2 border-b">普通管理员</td>
                    <td class="p-2 border-b">12345645670</td>
                    <td class="p-2 border-b">wenchaung@409.com</td>
                    <td class="p-2 border-b">四川广元</td>
                    <td class="p-2 border-b"><span class="user-status user-status-active">活跃</span></td>
                    <td class="p-2 border-b">2025-03-20</td>
                    <td class="p-2 border-b">
                        <button class="btn btn-sm btn-primary-custom" onclick="openUserModal('U003', '王五', 'normal_admin', 'active', '2025-03-20')">查看详情</button>
                        <button class="btn btn-sm btn-warning bg-yellow-500 text-white p-1 rounded hover:bg-yellow-600"
                                onclick="openEditUserModal('U003')">编辑</button>
                        <button class="btn btn-sm btn-danger bg-red-500 text-white p-1 rounded hover:bg-red-600" onclick="openDeactivateUserModal('U003', '王五')">停用</button>
                    </td>
                </tr>
                <tr>
                    <td class="p-2 border-b">4</td>
                    <td class="p-2 border-b">U004</td>
                    <td class="p-2 border-b">093469</td>
                    <td class="p-2 border-b">刘六</td>
                    <td class="p-2 border-b">男</td>
                    <td class="p-2 border-b">商城管理员</td>
                    <td class="p-2 border-b">12345645670</td>
                    <td class="p-2 border-b">wenchaung@401.com</td>
                    <td class="p-2 border-b">四川武胜</td>
                    <td class="p-2 border-b"><span class="user-status user-status-active">活跃</span></td>
                    <td class="p-2 border-b">2025-03-20</td>
                    <td class="p-2 border-b">
                        <button class="btn btn-sm btn-primary-custom" onclick="openUserModal('U004', '刘六', 'mall_admin', 'active', '2025-03-20')">查看详情</button>
                        <button class="btn btn-sm btn-warning bg-yellow-500 text-white p-1 rounded hover:bg-yellow-600"
                                onclick="openEditUserModal('U004')">编辑</button>
                        <button class="btn btn-sm btn-danger bg-red-500 text-white p-1 rounded hover:bg-red-600" onclick="openDeactivateUserModal('U004', '刘六')">停用</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="pagination flex justify-between items-center mt-4">
                <div>
                    <span id="currentPageInfo">当前第 1 页</span>
                </div>
                <div class="flex space-x-2">
                    <button onclick="prevPage()" class="btn btn-secondary-custom">上一页</button>
                    <div class="flex space-x-1 pagination-buttons">
                        <!-- 动态生成页码按钮 -->
                    </div>
                    <button onclick="nextPage()" class="btn btn-secondary-custom">下一页</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 用户详情模态框 -->
<div id="userModal" class="modal">
    <div class="modal-content bg-white p-4 rounded m-8 relative">
        <span class="close absolute top-2 right-2 text-gray-500 cursor-pointer" onclick="closeUserModal()">&times;</span>
        <h2 class="text-xl font-bold mb-4">用户详情</h2>
        <div class="order-detail">
            <div class="detail-section mb-4">
                <h3 class="text-lg font-bold mb-2">基本信息</h3>
                <div class="detail-row flex mb-1">
                    <div class="detail-label w-1/4 font-bold">用户 ID</div>
                    <div class="detail-value w-3/4" id="user-id"></div>
                </div>
                <div class="detail-row flex mb-1">
                    <div class="detail-label w-1/4 font-bold">用户名</div>
                    <div class="detail-value w-3/4" id="user-name"></div>
                </div>
                <div class="detail-row flex mb-1">
                    <div class="detail-label w-1/4 font-bold">用户角色</div>
                    <div class="detail-value w-3/4" id="user-role-detail"></div>
                </div>
            </div>
            <div class="detail-section mb-4">
                <h3 class="text-lg font-bold mb-2">状态信息</h3>
                <div class="detail-row flex mb-1">
                    <div class="detail-label w-1/4 font-bold">用户状态</div>
                    <div class="detail-value w-3/4" id="user-status-detail"></div>
                </div>
                <div class="detail-row flex mb-1">
                    <div class="detail-label w-1/4 font-bold">注册时间</div>
                    <div class="detail-value w-3/4" id="user-registration-time"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 编辑用户信息模态框 -->
<div id="editUserModal" class="modal">
    <div class="modal-content bg-white p-4 rounded m-8 relative max-w-2xl">
        <span class="close absolute top-2 right-2 text-gray-500 cursor-pointer" onclick="closeEditUserModal()">&times;</span>
        <h2 class="text-xl font-bold mb-4">编辑用户信息</h2>
        <form id="editUserForm">
            <input type="hidden" id="edit-user-id">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div class="form-group">
                    <label for="edit-user-name" class="block mb-1 font-bold">用户名</label>
                    <input type="text" id="edit-user-name" class="w-full p-2 border rounded">
                </div>
                <div class="form-group">
                    <label for="edit-user-password" class="block mb-1 font-bold">密码</label>
                    <input type="password" id="edit-user-password" class="w-full p-2 border rounded">
                </div>
                <div class="form-group">
                    <label for="edit-user-gender" class="block mb-1 font-bold">性别</label>
                    <select id="edit-user-gender" class="w-full p-2 border rounded">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="edit-user-role" class="block mb-1 font-bold">用户角色</label>
                    <select id="edit-user-role" class="w-full p-2 border rounded">
                        <option value="customer">客户</option>
                        <option value="seller">卖家</option>
                        <option value="normal_admin">普通管理员</option>
                        <option value="mall_admin">商城管理员</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="edit-user-phone" class="block mb-1 font-bold">联系电话</label>
                    <input type="tel" id="edit-user-phone" class="w-full p-2 border rounded">
                </div>
                <div class="form-group">
                    <label for="edit-user-email" class="block mb-1 font-bold">用户邮箱</label>
                    <input type="email" id="edit-user-email" class="w-full p-2 border rounded">
                </div>
                <div class="form-group md:col-span-2">
                    <label for="edit-user-address" class="block mb-1 font-bold">收货地址</label>
                    <input type="text" id="edit-user-address" class="w-full p-2 border rounded">
                </div>
                <div class="form-group">
                    <label for="edit-user-status" class="block mb-1 font-bold">用户状态</label>
                    <select id="edit-user-status" class="w-full p-2 border rounded">
                        <option value="active">活跃</option>
                        <option value="inactive">停用</option>
                    </select>
                </div>
            </div>
            <div class="flex justify-end space-x-4">
                <button type="button" onclick="closeEditUserModal()" class="btn btn-secondary-custom">取消</button>
                <button type="button" onclick="saveUserChanges()" class="btn btn-primary-custom">保存</button>
            </div>
        </form>
    </div>
</div>

<!-- 批量导入用户模态框 -->
<div id="importUserModal" class="modal">
    <div class="modal-content bg-white p-4 rounded m-8 relative max-w-2xl">
        <span class="close absolute top-2 right-2 text-gray-500 cursor-pointer" onclick="closeImportUserModal()">&times;</span>
        <h2 class="text-xl font-bold mb-4">批量导入用户</h2>
        <div class="mb-4">
            <label class="block mb-2 font-bold">选择文件 (CSV格式)</label>
            <input type="file" id="userFileInput" accept=".csv" class="w-full p-2 border rounded">
            <p class="text-sm text-gray-500 mt-1">请确保CSV文件包含用户ID、用户名、密码、性别、角色、电话、邮箱、地址、状态和注册时间列</p>
        </div>
        <div class="mb-4">
            <button onclick="downloadUserSampleCSV()" class="btn btn-secondary-custom">下载示例文件</button>
        </div>
        <div class="flex justify-end space-x-4">
            <button type="button" onclick="closeImportUserModal()" class="btn btn-secondary-custom">取消</button>
            <button type="button" onclick="importUserData()" class="btn btn-primary-custom">导入</button>
        </div>
    </div>
</div>

<!-- 停用用户确认模态框 -->
<div id="deactivateUserModal" class="modal">
    <div class="modal-content bg-white p-4 rounded m-8 relative max-w-md">
        <span class="close absolute top-2 right-2 text-gray-500 cursor-pointer" onclick="closeDeactivateUserModal()">&times;</span>
        <h2 class="text-xl font-bold mb-4">确认停用用户</h2>
        <p class="mb-4" id="deactivate-user-message">您确定要停用此用户吗？</p>
        <div class="flex justify-end space-x-4">
            <button type="button" onclick="closeDeactivateUserModal()" class="btn btn-secondary-custom">取消</button>
            <button type="button" onclick="confirmDeactivateUser()" class="btn btn-danger bg-red-500 text-white p-2 rounded hover:bg-red-600">确认停用</button>
        </div>
    </div>
</div>

<!-- 启用用户确认模态框 -->
<div id="activateUserModal" class="modal">
    <div class="modal-content bg-white p-4 rounded m-8 relative max-w-md">
        <span class="close absolute top-2 right-2 text-gray-500 cursor-pointer" onclick="closeActivateUserModal()">&times;</span>
        <h2 class="text-xl font-bold mb-4">确认启用用户</h2>
        <p class="mb-4" id="activate-user-message">您确定要启用此用户吗？</p>
        <div class="flex justify-end space-x-4">
            <button type="button" onclick="closeActivateUserModal()" class="btn btn-secondary-custom">取消</button>
            <button type="button" onclick="confirmActivateUser()" class="btn btn-success bg-green-500 text-white p-2 rounded hover:bg-green-600">确认启用</button>
        </div>
    </div>
</div>
<script src="../js/管理员用户管理.js"></script>
</body>
</html>